<template>
    <div class="PloyHistory">
        <div class="ploy-common-control">

        </div>
        <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="name" label="机器人" width="180"></el-table-column>
            <el-table-column prop="guid" label="机器人ID" width="300">0</el-table-column>
            <!--<el-table-column width="100" prop="0" label="持仓"></el-table-column>-->
            <el-table-column width="100" prop="0" label="浮动收益">0</el-table-column>
            <el-table-column width="100" prop="0" label="平仓收益">0</el-table-column>
            <el-table-column width="100" prop="0" label="工作状态">0</el-table-column>
            <el-table-column width="100" prop="0" label="到期状态">0</el-table-column>
            <el-table-column label="操作" width="480" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" @click="controlDetail(scope.$index, scope.row)">详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="detailName" :show-close="false" :visible.sync="outerVisible" v-if="outerVisible">
            <el-card shadow="never">
                <div slot="header" class="clearfix">
                    <span>全局参数</span>
                </div>
                <div class="g-p-c">
                    <p class="clearfix"><span>名称：{{detailName}}</span><span>ID：{{guid}}</span></p>
                    <p class="clearfix">
                        <span>手数：{{Quantity}}</span>
                        <span>止损：{{StopLossValue}}</span>
                    <span> <el-checkbox label="重复" :checked="Repeatable" disabled></el-checkbox></span>
                    <span>方向：{{LongOrShort}}</span>
                    </p>
                </div>
            </el-card>
            <el-tabs v-model="activeName">
                <el-tab-pane :label="$t('ploy_userParam_tit')" name="userParam">
                    <el-table :data="userParamData" style="width: 100%">
                        <el-table-column prop="key" label="参数" width="180"></el-table-column>
                        <el-table-column prop="Type" label="类型"></el-table-column>
                        <el-table-column prop="Value"  label="参数值"></el-table-column>
                        <el-table-column prop="Description" label="参数描述"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="$t('ploy_userExchange_tit')" name="userExchange">
                    <el-table :data="userExchangeData" style="width: 100%">
                        <el-table-column prop="ExchangeID" label="交易所"></el-table-column>
                        <el-table-column prop="Symbol" label="交易对"></el-table-column>
                        <el-table-column prop="Period" label="周期"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">{{$t('btn_cancel')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PloyHistory",
        inject:['reload'],
        data() {
            return {
                tableData: [],
                outerVisible: false,
                innerVisible: false,
                activeName: "userParam",
                userParamData: [],
                userExchangeData: [],
                addPloyDialog:false,
                addPloyform:{
                    guid:"",
                    title:"",
                    desc:""
                },
                ployData:[],
                Quantity:"",
                Repeatable:"",
                StopLossValue:"",
                LongOrShort:"",
            };
        },
        mounted() {
            this.getUserPloy();
        },
        created(){

        },
        methods: {
            controlDetail(index, row) {//详细
                this.detailOrEditShow(row);
            },
            detailOrEditShow(row){
                if (row.source && row.source != undefined) {
                    this.outerVisible = true;
                    this.guid=row.guid;
                    this.detailName=row.name;
                    let sourceData = JSON.parse(row.source || {});
                    if (sourceData == null) {
                        this.$message.error(this.$t('ploy_view_error'));
                        return;
                    }
                    this.userExchangeData=[];
                    this.userParamData=[];
                    this.userExchangeData=sourceData.Instruments;
                    for (var index in sourceData.SpecialParams){
                        sourceData.SpecialParams[index]['key']=index;
                        this.userParamData.push(sourceData.SpecialParams[index]);
                    }

                    this.Quantity= sourceData.QuantType ?sourceData.Quantity: sourceData.Quantity*100+" %";
                    this.StopLossValue= sourceData.stoptype ?sourceData.StopLossValue: sourceData.StopLossValue*100+" %";
                    this.Repeatable=sourceData.Repeatable;

                    if(sourceData.LongOrShort==null){
                        this.LongOrShort=this.$t('ploy_LongOrShort_1');
                    }else if(sourceData.LongOrShort==false){
                        this.LongOrShort=this.$t('ploy_LongOrShort_2');
                    }else if(sourceData.LongOrShort==true){
                        this.LongOrShort=this.$t('ploy_LongOrShort_3');
                    }
                } else {
                    this.$message.error(this.$t('ploy_view_error'));
                    return;
                }
            },
            getUserPloy() {
                let $url=this.USER_STRATEGY_HISTORY;
                this.axios
                    .get($url)
                    .then(res => {
                        if (res.data.status == 'success') {
                            this.tableData = res.data.data;
                        } else {
                            this.$message({message: res.data.msg});
                        }
                    })
                    .catch(res => {

                    });
            }
        }
    }
</script>

<style scoped lang="scss">
.clearfix {clear: both;}
.ploy-common-control{position: fixed;z-index: 100;top: 60px;width: 100%;background: #fff;padding: 5px 0px;}
.g-p-c p {
    line-height: 30px;
    span{ padding: 20px;}
}
</style>
